<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        dl{
            overflow: hidden;
            transition: .3s;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <p>教学系统</p>
            <dl>
                <dd>11</dd>
                <dd>22</dd>
            </dl>
        </li>
        <li>
            <p>教学系统</p>
            <dl>
                <dd>11</dd>
                <dd>22</dd>
                <dd>33</dd>
            </dl>
        </li>
        <li>
            <p>教学系统</p>
            <dl>
                <dd>11</dd>
                <dd>22</dd>
                <dd>33</dd>
                <dd>44</dd>
            </dl>
        </li>
    </ul>

    <script>

        // 折叠菜单效果：点击 p  下面的dl会出现或者隐藏  (滑动效果需要通过设置高度实现--定时器)  

        // 注意：  dl高度是不确定的   (可以获取dl的高度  offsetHeight , 把高度绑定到dl身上)

        
        const oUl = document.querySelector('ul') ;

        const oDls = oUl.querySelectorAll('dl') ;

        const oPs = document.querySelectorAll('p') ;

        // 把每个dl的高度绑定到了自定义属性h上
        for(let i = 0 ; i < oDls.length ; i++) {
            // h 保存的是dl的高度
            oDls[i].setAttribute('h' , oDls[i].offsetHeight) ;
            oDls[i].style.height = 0 ;
        }


        // 绑定事件后可以根据dl的offsetHeight高度判断是否关闭 
        //     如果关闭就打开  
        //     如果是打开的就关闭


        for(let i = 0 ; i < oPs.length ; i++) {
            oPs[i].onclick = function() {
                if(this.nextElementSibling.style.height == 0 + 'px') {
                    let h = this.nextElementSibling.getAttribute('h') ;
                    this.nextElementSibling.style.height = h + 'px' ;
                    // let c = 0 ;
                    // let t = setInterval(() => {
                    //     c++ ;
                    //     this.nextElementSibling.style.height = c + 'px' ;
                    //     if(c == h) {
                    //         clearInterval(t)
                    //     }
                    // } , 10)
                } else {
                    this.nextElementSibling.style.height = 0 + 'px' ;
                }
               
            }
        }

       

    </script>

   
</body>
</html>